<!-- eslint-disable -->
<template>
  <main class="contact-us">
    <section class="section-header">
      <img class="nav-logo" src="../../assets/front/img/logo_main.png">
      <div class="welcome">
        帮助中心
      </div>
      <div class="help-nav-list">
        <!-- eslint-disable-next-line -->
        <div v-for="(item,index) in navList" :key="index" class="help-nav-item"
             :class="{active:index===activeIndex}" @click="handleNav(index)">
          {{item.name}}
        </div>
      </div>
    </section>
    <section class="section-search">
      <div class="search-form">
        <img src="../../assets/front/img/search.svg">
        <input class="search-input" placeholder="输入问题关键字，如订单"/>
      </div>
      <div class="search-button">搜索</div>
    </section>
    <section class="section-buyer">
      <div class="section-title">
        我是买家
      </div>
      <div class="icons">
        <div class="icon">
          <img src="../../assets/front/img/visitor_1.png">
          <div class="icon-figure green">
            联系方式
          </div>
        </div>
        <div class="icon">
          <img src="../../assets/front/img/visitor_0.png">
          <div class="icon-figure">
            我要买
          </div>
        </div>
        <div class="icon">
          <img src="../../assets/front/img/visitor_0.png">
          <div class="icon-figure">
          </div>
        </div>
      </div>
      <div class="form">
        <el-form ref="buyer" inline :model="buyer.form" :rules="buyer.rules">
          <div class="form-title">
            确认联系方式
          </div>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="buyer.form.name"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="phoneNumber">
            <el-input type="number" v-model="buyer.form.phoneNumber"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input type="textarea" v-model="buyer.form.address"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="handleBuy">我要买</el-button>
          </el-form-item>
        </el-form>
      </div>

    </section>
    <section class="section-seller">
      <div class="section-title">
        我是卖家
      </div>
      <div class="icons">
        <div class="icon">
          <img src="../../assets/front/img/visitor_1.png">
          <div class="icon-figure green">
            联系方式
          </div>
        </div>
        <div class="icon">
          <img src="../../assets/front/img/visitor_0.png">
          <div class="icon-figure">
            我要卖
          </div>
        </div>
        <div class="icon">
          <img src="../../assets/front/img/visitor_0.png">
          <div class="icon-figure">
          </div>
        </div>
      </div>
      <div class="form">
        <el-form ref="seller" inline :model="seller.form">
          <div class="form-title">
            确认联系方式
          </div>
          <el-form-item label="姓名">
            <el-input v-model="seller.form.name"></el-input>
          </el-form-item>
          <el-form-item label="手机">
            <el-input type="number" v-model="seller.form.phoneNumber"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input type="textarea" v-model="seller.form.address"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success">我要卖</el-button>
          </el-form-item>
        </el-form>
      </div>
    </section>
    <el-dialog>

    </el-dialog>
  </main>
</template>

<script>
import VisitorInfoAPI from '@/api/business/visitor_info';
export default {
    components: {},
    data() {
        return {
            activeIndex: 0,
            navList: [
                {
                    name: '首页',
                    path: '/f'
                },
                {
                    name: '常见问题',
                    path: ''
                },
                {
                    name: '联系客服',
                    path: ''
                },
                {
                    name: '游客留资',
                    path: '/f/contact-us'
                }
            ],
            buyer: {
                visible: '',
                form: {
                    name: '',
                    phoneNumber: '',
                    address: ''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入', trigger: 'blur' }
                    ],
                    phoneNumber: [
                        { required: true, message: '请输入', trigger: 'blur' }
                    ]
                }
            },
            seller: {
                form: {
                    name: '',
                    phoneNumber: '',
                    address: ''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入', trigger: 'blur' }
                    ],
                    phoneNumber: [
                        { required: true, message: '请输入', trigger: 'blur' }
                    ]
                }
            }
        };
    },
    methods: {
        handleNav(index) {
            this.$router.push(this.navList[index].path);
        },
        handleBuy() {
            this.$refs['buyer'].validate((valid) => {
                if (valid) {
                    const msg = this.buyer.form.name + '【' + this.buyer.form.phoneNumber + '】' + this.buyer.form.address;
                    this.$confirm(msg, '确认信息', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        VisitorInfoAPI.postEntity(this.buyer.form)
                            .then(() => {
                                this.$alert('已成功提交信息，稍后会有工作人员和您联系');
                            })
                            .catch(() => {
                                this.$message({
                                    type: 'danger',
                                    message: '网络异常，请稍后再试'
                                });
                            });
                    }).catch();
                } else {
                    this.$alert('请输入姓名和手机号');
                    return false;
                }
            });
        },
        handleSell() {
            this.$refs['seller'].validate((valid) => {
                if (valid) {
                    const msg = this.seller.form.name + '【' + this.seller.form.phoneNumber + '】' + this.seller.form.address;
                    this.$confirm(msg, '确认信息', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        VisitorInfoAPI.postEntity(this.seller.form)
                            .then(() => {
                                this.$alert('已成功提交信息，稍后会有工作人员和您联系');
                            })
                            .catch(() => {
                                this.$message({
                                    type: 'danger',
                                    message: '网络异常，请稍后再试'
                                });
                            });
                    }).catch();
                } else {
                    this.$alert('请输入姓名和手机号');
                    return false;
                }
            });
        }
    }
};
</script>
<style lang="scss">
  @import "../../assets/front/front";

  .contact-us {
    width: $page-width;
    .section-header {
      padding: 0 5px;
      height: 85px;
      display: flex;
      align-items: center;
      background: $main-color;
      .welcome {
        margin-left: 10px;
        padding: 0 15px;
        height: 60px;
        @include flex-center;
        font-size: 24px;
        color: #fff;
        border-left: $border;
      }
      .help-nav-list {
        flex-grow: 1;
        height: 100%;
        @include flex-align-center;
        justify-content: flex-end;
        .help-nav-item {
          padding: 0 20px;
          height: 100%;
          color: #fff;
          cursor: pointer;
          @include flex-center;
          &.active, &:hover {
            background-color: #16ab58;
          }
        }
      }
    }
    .section-search {
      height: 130px;
      @include flex-center;
      background: url("../../assets/front/img/help_center_banner.png");
      background-size: 100%;
      .search-form {
        width: 300px;
        height: 50px;
        @include flex-align-center;
        border: 2px solid $main-color;
        background: #fff;
        > img {
          margin: 0 10px;
          height: 21px;
        }
        .search-input {
          border: none;
          outline: none;
          height: 46px;
          width: 250px;
        }
      }
      .search-button {
        width: 100px;
        height: 50px;
        @include flex-center;
        color: white;
        background: $main-color;
      }
    }
    .section-buyer,.section-seller {
      .section-title {
        margin: 50px 5px;
        font-size: 24px;
        color: $main-color;
      }
      .icons {
        margin:0 150px;
        @include flex-align-center;
        justify-content: space-between;
        .icon {
          width:110px;
          >img {
            width:100%;
          }
          .icon-figure {
            width:110px;
            height:32px;
            @include flex-center;
            background: #dadada;
            &.green {
              background: $main-color;
              color:white;
            }
          }
        }
      }
      .form {
        margin-top: 20px;
        padding:20px 66px;
        height:150px;
        border: solid 1px $main-color;
      }
      .form-title {
        margin-bottom:15px;
        font-size: 18px;
      }
    }
  }

</style>
